<style lang="less">
  .top-slide{
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ccc;
    position: relative;
    h3{
      color:#fff;
      position: absolute;
      left: 20px;
      right: 40px;
      bottom:30px;
    }
  }
  .cate-news-list{
    padding:0 10px;
    background: #eee;
    h5{
      padding:10px 0;
    }
  }
  span.editor{
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
  }
  .story-item{
    padding:10px;
    border:1px solid #ccc;
    box-shadow: 1px 0 2px #bbb;
    border-radius: 5px;
    display: flex;
    display: -webkit-flex;
    justify-content:space-between;
    margin-bottom: 10px;
    min-height: 60px;
    p{
      padding:3px 10px;
      min-width: 82%;
    }
    img{
      width: 60px;
      height: 60px;
      min-width: 60px;
    }
  }
</style>
<template>
  <div class="cate-news">
    <div class="top-slide" :style="{backgroundImage:background?'url('+imgUrl+'/public-pic?img='+background+')':'none'}">
      <h3>{{description}}</h3>
    </div>
    <!-- :style="{backgroundImage:'url('+imgUrl+'/public-pic?img='+background+')'}" -->
    <ul class="cate-news-list">
      <router-link :to="'/editors/'+this.$route.params.id" tag="h5">主编<span class="editor" v-for="editor in editors"><img :src="imgUrl+'/public-pic?img='+editor.avatar" class="img-circle" width="20" height="20"  /></span></router-link>
      <router-link :to="'/news/'+story.id" v-for="story in stories" class="story-item clearfix" tag="li">
        <p>{{story.title}}</p>
        <img class="cate-story-img" v-if="story.images" :src="imgUrl+'/public-pic?img='+story.images[0]" />
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
import { mapState } from 'vuex'
  export default {
    name:'cate-news',
    data() {
      return {
      }
    },
    computed:mapState({
      background: state => state.cateStories.background,
      stories: state => state.cateStories.stories,
      editors: state => state.cateStories.editors,
      name: state => state.cateStories.name,
      imgUrl:state => state.imgUrl,
      description: state => state.cateStories.description
    }),
    created() {
      let id = this.$route.params.id;
      this.$store.dispatch('getData',{
        url:'/api/4/theme/'+ id,
        mutation: 'GET_CATE_STORIES'
      });
    },
    watch:{
      '$route'(to,from){
        this.$store.dispatch('getData',{
          url:'/api/4/theme/'+ to.params.id,
          mutation: 'GET_CATE_STORIES'
        });
      }
    }
  }
</script>
